<!-- pages/components/view/view.vue -->
<template>
	<view class="wrapper">
		<!-- 1. 横向布局 (flex-direction: row) -->
		<view class="title">flex-direction: row 横向布局</view>
		<!-- 这是父容器，启动flex -->
		<view class="box row">
			<!-- 子元素 A、B、C 设置了 flex: 1，它们将平分父容器的宽度 -->
			<view class="box-item item-a">A</view>
			<view class="box-item item-b">B</view>
			<view class="box-item item-c">C</view>
		</view>

		<!-- 2. 纵向布局 (flex-direction: column) -->
		<view class="title">flex-direction: column 纵向布局</view>
		<!-- 这是父容器，启动flex，并修改主轴为纵向 -->
		<view class="box column">
			<!-- 在纵向布局中，A、B、C 也会平分父容器的高度 -->
			<view class="box-item item-a">A</view>
			<view class="box-item item-b">B</view>
			<view class="box-item item-c">C</view>
		</view>
	</view>
</template>

<script>
	// Vue 2 写法
	export default {
		data() {
			return {
				// 本页面暂时不需要动态数据
			}
		},
		methods: {
			
		}
	}
</script>

<style>
.wrapper {
	padding: 15px;
}
.title {
	font-size: 16px;
	font-weight: bold;
	padding: 10px 5px;
	border-bottom: 1px solid #f0f0f0;
	margin-bottom: 10px;
}
.box {
	/* 关键：启动Flexbox */
	display: flex;
	height: 150px; /* 给一个固定高度 */
	border: 1px solid #333;
}

/* 横向布局 */
.row {
	flex-direction: row;
}

/* 纵向布局 */
.column {
	flex-direction: column;
}

.box-item {
	/* 关键：子元素平分空间 */
	flex: 1; 
	
	/* 以下为A,B,C的样式 */
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 20px;
	color: white;
}
.item-a {
	background-color: #007aff; /* 蓝色 */
}
.item-b {
	background-color: #4cd964; /* 绿色 */
}
.item-c {
	background-color: #f0ad4e; /* 橙色 */
}
</style>